<template>
  <div class="vue-component-02">
    <MedoVRank1 :options="rankOptions" @medoVRankRowClick="medoVRankRowClick"></MedoVRank1>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import MedoVRank1 from "@/components/vue-common/MedoVRank1.vue";

const data = reactive({
  rankOptions: {
    width: 640,
    height: 300,
    colors: ["#00f8ff", "#00f15a", "#0696f9", "#dcf776", "#00f8ff"],
    data: [
      { count: 735, name: "苏EXXXX2", unit: "km" },
      { count: 1048, name: "苏EXXXX1", unit: "km" },
      { count: 300, name: "苏EXXXX5", unit: "km" },
      { count: 580, name: "苏EXXXX3", unit: "km" },
      { count: 484, name: "苏EXXXX4", unit: "km" },
      { count: 580, name: "苏EXXXX3", unit: "km" },
    ],
  },
});

const medoVRankRowClick = (row) => {
  console.log(row);
};

const { rankOptions } = toRefs(data);
</script>

<style scoped lang="less">
.vue-component-02 {
  display: flex;
  justify-content: space-around;
  width: 500px;
  background-color: #061740;
  padding: 20px;
}
</style>
